
<!doctype html>

<html>

 <head>

  <title>WarGames Action Manager</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

  <script type="text/javascript">

        

   //populate "all actions" list
   
   function getAllActions() {

      $('#allactions').html("");

      $('#loadingactions').show();

      $.ajax({

	  
            url: "http://plato.cs.virginia.edu:8080/ApertureScience/actions",

            type: "GET",

            dataType: "json",

            success: function(data, textStatus, jqXHR) {

               $('#loadingactions').hide();

               var html = "<table>";

               for(var x = 0; x < data.length; x++) {

                  html += "<tr>";
                  html += "<td><a class=\"action\" href=\"#" + data[x]._id + "\" onclick=\"getAction(" + data[x]._id + ")\">" + data[x].name + "</a></td>";
                  html += "<td><a class=\"error\" href=\"#" + data[x]._id + "\" onclick=\"delAction(" + data[x]._id + ")\">(delete)</a></td>";
                  html += "</tr>";
               }

               html += "</table>";

               $('#allactions').html(html);
			   

            }

      });

   }

   $(getAllActions);

   

   var currentID = 1;
   function getAction(id) 
   {   
		   
	  currentID = id;
      $('#loadingaction').show();

      $.ajax({

         url: "http://plato.cs.virginia.edu:8080/ApertureScience/actions/" + id,

         type: "GET",

         dataType: "json",

         success: showAction

      });

   }

   function showAction(data, textStatus, jqXHR) {

      $('#loadingaction').hide();

      $('#name').val(data.name);

      $('#description').val(data.description);

      //gotta put in stuff to display all the state transitions

      $('tr.transition').remove();

      for(x in data) {

         if(x == "_id" || x == "_rev" || x == "description" || x == "name")
            continue;

         $('#actiondata').append(
               "      <tr class=\"transition\">\n" +
               "       <td>" + x + "</td>\n" + 
               "       <td>&rarr;</td>\n" + 
               "       <td>" + data[x] + "</td>\n" +
               "      </tr>\n");
      }

   }

   function delAction(id) {
      $.ajax({
         url: "http://plato.cs.virginia.edu:8080/ApertureScience/actions/" + id,
         type: "DELETE",
         success: function(data, textStatus, jqXHR) {
            getAllActions();
         }
      });
   }

   function createNew() {

      var wnd = window.open("createAction.html", "", "status = 1, width = 700, height = 600, resizable = 1");

   }

  </script>

  <style type="text/css">

   body { font-family: "Arial", "Sans serif"; }

   div#main { width: 60%; }

   div#main h2, div#main h3 { text-align: center; }

   div#main fieldset#actionlist { width: 25%; float: left; border-top-left-radius: 25px; border-bottom-left-radius: 25px; height: 330px; }

   div#main fieldset#actionlist div#allactions { max-height: 285px; overflow: auto; }

   div#main fieldset#actionlist div#allactions table a.error { font-size: smaller; color: red; font-weight: bold; }

   div#main fieldset#actionlist div#loadingactions { display: none; text-align: center; }

   div#main fieldset#actionform { width: 65%; border-top-right-radius: 25px; border-bottom-right-radius: 25px; height: 330px; }
   
   div#main fieldset#actionform form { max-height: 300px; overflow: auto; }

   div#main fieldset#actionform tr:not(.transition) td:first-child { font-weight: bold; }

   div#main fieldset#actionform div#loadingaction { display: none; text-align: center; }

  </style>

 </head>

 <body>

  <div id="main">

   <h2>WarGames Medical Simulation</h2>
   <h3>Action Manager</h3>

   <fieldset id="actionlist">

    <legend>All Actions</legend>

    <div id="loadingactions">

     Loading actions...<br><img src="loading.gif">

    </div>

    <div id="allactions">

    </div>

    <input type="button" value="Create new action" onclick="createNew()">

   </fieldset>

   <fieldset id="actionform">

    <legend>Current Action</legend>

    <form>

     <table>
      
      <tr>

       <td style="height: 40px;">Name:</td>

       <td style="height: 40px;"><input type="text" id="name" name="name" readonly="readonly"></td>

       <td rowspan="2">
        <div id="loadingaction">

     Loading action...<br><img src="loading.gif">

        </div>
       </td>

      </tr>

      <tr>

       <td style="height: 40px;">Description:</td>

       <td style="height: 40px;"><input type="text" id="description" name="description" readonly="readonly"></td>


      </tr>
   
     </table>
     
     <table id="actiondata">

      <tr>
      
       <th colspan="3">State Transitions</th>

      </tr>

     </table>

    </form>

   </fieldset>

   <a href="index.html">Go to patient simulator</a>

  </div>

 </body>

</html>